<template>
  <div class="view-container">

    <!--<el-alert class="view－alert"
              :title="alertText"
              type="warning"
              show-icon>
    </el-alert>-->

    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
      <el-tab-pane v-for="tab in tabs" :key="tab.name" :name="tab.name">
        <span slot="label">
          {{tab.label}}
          <el-badge class="mark" :value="tab.num" :max="99" :hidden="tab.num<=0" />
        </span>
      </el-tab-pane>
    </el-tabs>

    <div class="">
      <keep-alive>
        <component :is="activeName">
        </component>
      </keep-alive>
    </div>

  </div>
</template>

<script>
  import {getTab,setTab} from '@/utils/order';
  import completedLease from './completed_lease.vue';
  //import completedBuyout from './completed_buyout.vue';
  export default {
    name: 'orderCompleted',
    components:{
      'completed-lease':completedLease,
      /*'completed-buyout':completedBuyout,*/
    },
    data ()
    {
      return {
        activeName:'completed-lease', //当前激活的标签,以及视图
        tabs:[
          {label: '租赁完成', name: 'completed-lease', num:0},
          /*{label: '买断完成', name: 'completed-buyout', num:0},*/
        ], //标签页数组
      }
    },
    computed:{
      alertText()
      {
        return '您有 12 个已完成账单';
      }
    },
    mounted(){
      let activetab = getTab();
      if(this.tabs.some((tab)=>{return activetab === tab.name}))
      {
        this.activeName = activetab;
      }
    },
    methods: {
      handleClick(tab,event)
      {
        setTab(tab.name);
      }
    }
  }
</script>
